<template>
  <card-layout title="方重配置" bg="3" class="chart">
    <template #extra>
      <el-icon class="extra-more" :size="22" @click="onClose">
        <Close />
      </el-icon>
    </template>
    <div class="weight-config">
      <div class="config-content">
        <div class="filter-row">
          <el-select
            v-model="queryParams.mineType"
            placeholder="矿石类型"
            class="filter-select"
          >
            <el-option
              v-for="item in mineTypes"
              :key="item"
              :label="item"
              :value="item"
            />
          </el-select>
          <el-select
            v-model="queryParams.subType"
            placeholder="岩石类型"
            class="filter-select"
          >
            <el-option
              v-for="item in rockTypes"
              :key="item"
              :label="item"
              :value="item"
            />
          </el-select>
          <!-- <el-input
            v-model="searchKeyword"
            placeholder="请输入"
            class="filter-input"
          /> -->
        </div>

        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="mainType" align="center" label="大类" />
          <el-table-column prop="subType" align="center" label="小类" />
          <el-table-column prop="weight" align="center" label="方重 (吨)">
            <template #default="scope">
              <div v-if="scope.row.editable" class="cell-inputs">
                <el-input
                  size="small"
                  class="input"
                  v-model="scope.row.weight"
                />
                <el-button
                  type="primary"
                  @click="scope.row.editable = false"
                  link
                  >保存</el-button
                >
              </div>
              <div class="cell-inputs" v-else>
                <div class="txt">{{ scope.row.weight }}</div>
                <el-button
                  type="primary"
                  @click="scope.row.editable = true"
                  link
                >
                  编辑
                </el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>

        <div class="pagination">
          <el-pagination
            hide-on-single-page
            background
            layout="prev, pager, next"
            :total="total"
            v-model:page="queryParams.pageNum"
            v-model:limit="queryParams.pageSize"
            @pagination="getList"
          />
        </div>
      </div>
    </div>
  </card-layout>
</template>

<script setup>
const queryParams = ref({
  mainType: "",
  subType: "",
  pageNum: 1,
  pageSize: 10,
});
const total = ref(4);
const mineTypes = ["砂石矿", "黑色金属矿", "有色金属矿"];
const rockTypes = [
  "白云岩",
  "石灰岩",
  "花岗岩",
  "砂岩",
  "玄武岩",
  "页岩",
  "石英砂",
  "卵石（天然）",
];
const emits = defineEmits(["close"]);
const tableData = ref([
  { mainType: "砂石矿", subType: "石灰岩", weight: "2.5", editable: true },
  { mainType: "砂石矿", subType: "花岗岩", weight: "2.7", editable: true },
  { mainType: "砂石矿", subType: "砂岩", weight: "2.4", editable: true },
  { mainType: "砂石矿", subType: "玄武岩", weight: "3.0", editable: true },
  { mainType: "砂石矿", subType: "白云岩", weight: "2.85", editable: true },
  { mainType: "砂石矿", subType: "石英砂", weight: "2.6", editable: true },
  {
    mainType: "砂石矿",
    subType: "卵石（天然）",
    weight: "2.65",
    editable: true,
  },
  { mainType: "砂石矿", subType: "页岩", weight: "2.45", editable: false },
  {
    mainType: "黑色金属矿",
    subType: "磁铁矿",
    weight: "5.05",
    editable: true,
  },
  {
    mainType: "黑色金属矿",
    subType: "赤铁矿",
    weight: "4.65",
    editable: true,
  },
  {
    mainType: "黑色金属矿",
    subType: "褐铁矿",
    weight: "3.5",
    editable: true,
  },
  {
    mainType: "黑色金属矿",
    subType: "菱铁矿",
    weight: "3.85",
    editable: true,
  },
]);
const onClose = () => {
  emits("close");
};
</script>

<style lang="scss" scoped>
.chart {
  flex: 1;
}
.weight-config {
  background-color: transparent;
  color: #333;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .config-content {
    padding: 15px;
    flex: 1;
    display: flex;
    flex-direction: column;

    .filter-row {
      display: flex;
      margin-bottom: 15px;
      gap: 10px;

      .filter-select {
        flex: 1;
      }

      .filter-input {
        flex: 1;
      }
    }

    .edit-icon {
      cursor: pointer;
      color: #3cb371; /* 中绿色图标 */

      &:hover {
        color: #2e8b57;
      }
    }

    .pagination {
      margin-top: 15px;
      display: flex;
      justify-content: center;
    }
  }

  .cell-inputs {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    .input {
      flex: 1;
    }

    .txt {
      flex: 1;
      box-sizing: border-box;
      // text-align: left;
      // padding-left: 12px;
    }
  }
}
</style>
